<template>
  <div class="Administration">
    <el-form :model="formData" label-width="80px">
      <el-card class="box-card">
        <div slot="header" class="df jcsb aic">
          <h4>店铺管理</h4>
          <el-button v-if="!isEdit" @click="isEdit = !isEdit" size="small" type="primary">
            编辑
          </el-button>
          <el-button v-else @click="isEdit = !isEdit; submit()" size="small" type="success">完成
          </el-button>
        </div>
        <div class="content">
          <!-- 店铺名称 -->
          <el-form-item label="店铺名称">
            <el-input class="ipt" v-model="formData.name" placeholder="店铺名称"></el-input>
          </el-form-item>
          <!-- 店铺公告 -->
          <el-form-item label="店铺公告">
            <el-input class="textarea" type="textarea" :rows="3" placeholder="请输入内容"
              v-model="formData.bulletin"></el-input>
          </el-form-item>
          <!-- 店铺头像 -->
          <el-form-item label="店铺头像">
            <el-upload class="avatar-uploader" :action="`${API}/shop/upload`" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="" />
                              </el-dialog> -->
          </el-form-item>
          <!-- 店铺照片 -->
          <el-form-item label="店铺照片">
            <el-upload :action="`${API}/shop/upload`" list-type="picture-card" :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove" :file-list="formData.pics" :on-success="handleShopUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <!-- 配送费 -->
          <el-form-item label="配送费">
            <el-input class="ipt" v-model="formData.deliveryPrice" placeholder="配送费"></el-input>
          </el-form-item>
          <!-- 配送时间 -->
          <el-form-item label="配送时间">
            <el-input class="ipt" v-model="formData.deliveryTime" placeholder="配送时间"></el-input>
          </el-form-item>
          <!-- 配送描述 -->
          <el-form-item label="配送描述">
            <el-input class="ipt" v-model="formData.description" placeholder="配送描述"></el-input>
          </el-form-item>
          <!-- 店铺评分 -->
          <el-form-item label="店铺评分" class="df aic rate">
            <el-rate disabled score-template="{value}" v-model="formData.score" show-score></el-rate>
          </el-form-item>
          <!-- 销量 -->
          <el-form-item label="销量">
            <el-input class="ipt" v-model="formData.sellCount" placeholder="销量"></el-input>
          </el-form-item>
          <!-- 活动 -->
          <el-form-item label="活动">
            <el-checkbox-group v-if="formData.supports" v-model="formData.supports">
              <el-checkbox label="在线支付满28减5"></el-checkbox>
              <el-checkbox label="VC无限果汁8折"></el-checkbox>
              <br />
              <el-checkbox label="单人精彩套餐"></el-checkbox>
              <el-checkbox label="特价饮品8折回购"></el-checkbox>
              <br />
              <el-checkbox label="单人特色套餐"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- 营业时间 -->
          <el-form-item label="营业时间">
            <el-time-picker is-range v-model="formData.date" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
          </el-form-item>
        </div>
      </el-card>
    </el-form>
</div>
</template>
  
<script>


import { getstoredetails, editShopReq } from '@/api/shop';

export default {
  data() {
    return {
      formData: {
      },
      // 店铺头像
      imageUrl: '',
      // 店铺照片 照片墙
      dialogImageUrl: '',
      dialogVisible: false,
      // 多选框
      checkList: ['复选框 A'],
      API: "http://sell.h5.itsource.cn:8087",
      isEdit: false, //是否可编辑
    }
  },
  methods: {
    async getData() {
      // 发送请求
      let res = await getstoredetails()
      // 修改数据
      let pics = res.data.data.pics.map(v => {
        return {
          url: v,
        }
      });
      //修改评分
      let score = res.data.data.score / 20;
      // 数据赋值
      //数据赋值
      this.formData = { ...res.data.data, pics, score }
    },
    async handleAvatarSuccess(res) {
      //解构数据
      let { code, msg, imgUrl } = res;
      //判断
      if (code === 0) {
        //发请求修改头像
        this.$message.success(msg);
        //数据回显
        this.formData.avatar = imgUrl;
      }
    },
    // 约束文件大小以及上传的文件
    beforeAvatarUpload(file) {
      const isJPG = /(png|jpeg)/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是PNG JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //多图上传成功钩子
    handleShopUpload(res) {
      //解构数据
      let { code, msg, imgUrl } = res;
      //判断
      if (code === 0) {
        //修改数据
        this.formData.pics.push({
          url: imgUrl,
        });
        this.$message.success(msg);
      }
    },
    handleRemove(file, fileList) {
      //直接数据赋值
      this.formData.pics = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async submit() {
      //处理数据
      let pics = this.formData.pics.map((v) => v.url);
      let score = this.formData.score * 20;
      let res = await editShopReq({
        ...this.formData,
        pics,
        score,
      });
    },
  },
  created() {
    this.getData()
  }
}
</script>
  
<style lang="scss" scoped>
.Administration {
  margin: 20px 0px 0px 20px;

  width: 100%;

  :deep(.el-card__header) {
    padding: 10px 20px;
  }

  .btn {
    margin: 0;
    padding-right: 20px;
  }

  .content {
    padding: 0 20px;

    .ipt,
    .textarea,
    .upload {
      width: 350px;
    }

    // 头像
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }

  .rate {
    :deep(.el-form-item__content) {
      margin-left: 0 !important;
    }
  }
}
</style>
  